Use React’s cache to avoid some queries to the database

1 files changed, 6 insertions, 3 deletions

diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 27f411a..0c36166 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,3 +1,4 @@
+import { cached } from '@/app/cached-functions'
 import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
@@ -9,13 +10,15 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { getGroup, getGroupExpenses } from '@/lib/api'
+import { getGroupExpenses } from '@/lib/api'
 import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
 
+export const revalidate = 3600
+
 export const metadata: Metadata = {
   title: 'Expenses',
 }
@@ -25,7 +28,7 @@ export default async function GroupExpensesPage({
 }: {
   params: { groupId: string }
 }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   return (
@@ -84,7 +87,7 @@ export default async function GroupExpensesPage({
 }
 
 async function Expenses({ groupId }: { groupId: string }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
   const expenses = await getGroupExpenses(group.id)